import React, { Component } from 'react';
import { Text, StyleSheet, View, ScrollView, Dimensions } from 'react-native';
//得到屏幕的宽高尺寸
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
export default class Flexbox extends Component {
    render() {
        return (
            <ScrollView>
                <ScrollView>
                    <Text> 弹性盒子布局 (默认)</Text>
                    <View style={[styles.container]}>
                        <Text>刘</Text>
                        <Text>关</Text>
                        <Text>张</Text>
                    </View>
                </ScrollView>
                <Text>------------------------</Text>
                <ScrollView>
                    <Text> 弹性盒子布局 </Text>
                    <View style={[styles.container, styles.reverse]}>
                        <Text style={[styles.itemBase]}>刘</Text>
                        <Text style={[styles.itemBase]}>关</Text>
                        <Text style={[styles.itemBase]}>张</Text>
                    </View>
                </ScrollView>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        width: 400,
        height: 400,
        margin: 10,
        borderWidth: 1,
        borderColor: 'red',
    },
    direction: {
        direction: 'row',
    },
    reverse: {
        flexDirection: 'column-reverse',
    },
    itemBase: {
        height: 30,
        width: width,
        fontSize: 20,
        color: '#dba',
        borderWidth: 2,
        borderColor: '#000',
        margin: 5,
    },
});
